<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_CSS常用值</title>
    <style>
        h1{
            color: red;
            /* rgb (red,green,blue) 取值范围[0.255] */
            color: rgb(255,0,0);
            color: rgb(0,255,255);
            color: rgb(0,255,0);
            color: rgb(255,0,255);
            color: rgb(0,0,255);
            color: rgb(255,255,0);
            color: rgb(0,0,0);
            color: rgb(255,255,255);
            color: rgb(128,128,128);
            /* 十六进制颜色表示法 #rrggbb 取值范围[00,FF] */
            color: #ff0000;
            color: #00ff00;
            color: #0000ff;
            color: #000000;
            color: #FFFFFF;
            color: #808080;
            /* 十六进制颜色简写表示法 #rgb 取值范围[0,F]
            需要每种颜色的两个数字一样，且每对都有重复数字才可以简写*/
            color: #f00;
            color: #0f0;
            color: #00f;
            color: #000;
            color: #fff;
        }
        div{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        /* rgba(red,green,blue,alpha) alpha为不透明度[0,1]1完全不透明 0完全透明 0.5半透明 */
        .d1{
            background-color: rgba(0,0255,1);
        }
        .d2{
            background-color: rgba(0,0,255,0.7);
        }
        .d3{
            background-color: rgba(0,0,255,0.4);
        }
        .d4{
            background-color: rgba(0,0,255,.1);
        }
        .d5{
            background-color: rgba(0,0,255,0);
        }
        .bgi{
            width: 500px;
            height: 300px;
            /* 背景处理：渐变（角度，颜色1，颜色2...） */
            background-image: linear-gradient(130deg,red,cyan);
        }
        /* viewport 视口 用来展示页面内容的完整窗口 */
        .viewport{
            width: 100vw; /* 100% viewport width 撑满全屏宽 */
            height: 100vw; /* 100% viewport height 撑满全屏高 */
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="viewport"></div>
    <div class="bgi"></div>
    <h1>测试颜色</h1>
    <!-- .d*5 Tab -->
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
</body>
</html>